<template>
	<view class="uni_box">
		<navbar title='抢购详情' backgroundColor='#ba0603'>
		</navbar>
		<view class="content">
			<view class="wrap" v-if="list.length !=0">
				<u-swiper :list="list" height="600" mode='number' border-radius="0"></u-swiper>
			</view>
			<view class="nav">
				
				<view class="navview">
					<text class="picon">抢购价¥</text>
					<text class="price">{{info.price}}</text>
				</view>
				<!-- <p class="baioti">标题文字标题文字标题文字</p> -->
			</view>
			<view class="miaoshuitem">
				<text class="baioti">{{info.productName}}</text>
				<!-- <text class="miaoshu">{{info.productName}}</text> -->
			</view>
			<!-- 
			<text class="time">08-10  08:31</text> -->
			<!-- <view class="fuwenben">
				<view class="chap">
					----  产品详情  ----
				</view>
				<u-parse :html="content" :tag-style="style"></u-parse>
			</view> -->
			
			<view class="btn">
				<view class="btns" @click="rushToPurchase">
					抢购
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: "<p>段落内容：无论在熊市还是牛市中，市场上亏损者仍然和别的状态下一样多。在趋势不明的情况下，我们盼望趋势的来临；然而趋势真正形成之时，我们却仍然一无所获。趋势表面上看对我们很重要，然而具体交易时却又难以利用，在具体交易时趋势似乎又毫无价值，这是为什么呢？我们应该如何理解和利用趋势呢？</p>",
				style: {
					img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				list: [
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					// 	title: '身无彩凤双飞翼，心有灵犀一点通'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					// }
				],
				id:null,
				info:''
			};
		},
		async onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			this.getDetail()
			
			
		},
		methods:{
			async getDetail(){
				let res = await this.$u.api.monad({
					monadId:this.id
				});
				this.info= res
				if(this.info.picture){
					let datas = []
					let parms = {}
					parms.image = this.info.picture 
					datas.push(parms)
					this.list = datas
					console.log(list)
				}
				
				
				// console.log(res)
				
			},
			async rushToPurchase(){
				let res = await this.$u.api.rushToPurchase({
					monadId:this.id
				});
				uni.navigateTo({
					url:'/pages/my/orderList?status=0'
				})
				// this.info= res
			}
		}
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #fff;
  }
  .content{
	  padding-bottom: 120rpx;
	  background-color: #fff;
	  // padding: 40rpx 30rpx;
	  font-size: 28rpx;
	  font-family: PingFang SC-中等, PingFang SC;
	  font-weight: normal;
	  color: #373A4D;
	  .baioti{
		  font-size: 34rpx;
		  font-family: PingFang SC-粗体, PingFang SC;
		  font-weight: bold;
		  color: #333;
	  }
	  .time{
		  font-size: 24rpx;
		  font-family: PingFang SC-中等, PingFang SC;
		  font-weight: normal;
		  color: #AEB0BF;
		  display: block;
		  margin: 20rpx 0 30rpx;
	  }
	  .nav{
		  display: flex;
		  // align-items: center;
		  padding: 30rpx;
		  // height:120rpx;
		  flex-direction: column;
		  background-color: rgba(251,8,43,1);
		  // padding: 20rpx 30rpx;
		  .picon{
			  font-size: 26rpx;
			  font-weight: bold;
			  color: #fff;
		  }
		  .price{
			  font-size: 45rpx;
			  font-weight: bold;
			  color: #fff;
			  display: inline-block;
			  margin-left: 5rpx;
		  }
	  }
	  .fuwenben{
		  padding: 20rpx;
		  .chap{
			  display: flex;
			  flex-direction: row;
			  align-items: center;
			  color: #333;
			  font-size: 32rpx;
			  font-weight: bold;
			  justify-content: center;
			  margin-bottom: 50rpx;
		  }
	  }
	  .miaoshuitem{
		  padding: 20rpx 30rpx;
		  display: flex;
		  flex-direction: column;
		  border-bottom: 1rpx solid #eee;
		  .miaoshu{
			  color: #999;
			  font-size: 30rpx;
			  font-weight: 400;
			  display: block;
			  margin-top: 10rpx;
		  }
		  
	  }
	  .btn{
		  position: fixed;
		  bottom: 0;
		  width: 100%;
		  height: 100rpx;
		  background-color: #fff;
		  z-index: 10;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  .btns{
			  width: 92%;
			  height: 88rpx;
			  border-radius: 50rpx;
			  background-color: rgba(211,12,38,1);
			  color: #fff;
			  font-size: 32rpx;
			  font-weight: 500;
			  display: flex;
			  align-items: center;
			  justify-content: center;
		  }
	  }
  }
</style>
